<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/personal.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header></common-header>
	<section class="banner" style="background-image: url(./images/about-banner.png);">
	</section>
	<section class="content">
		<section class="container">
			<user-tabs active-path="edit.html"></user-tabs>
			<section class="tab-content">
				<section class="title">个人资料</section>
				<section class="details">
					<form action="" class="password-form layui-form" lay-filter="editForm" @submit.prevent>
						<section class="layui-form-item">
							<section class="label">
								<section class="label-text">
									<span class="required">*</span>
									姓名
								</section>
								<section class="input-wrapper layui-input-block">
									<input autocomplete="off" readonly name="name" type="text" placeholder="请输入姓名">
								</section>
							</section>
						</section>
						<section class="layui-form-item">
							<section class="label">
								<section class="label-text">
									<span class="required">*</span>
									性别
								</section>
								<section class="layui-input-block">
									<select  name="gender">
										<option disabled value="male">男</option>
										<option disabled value="female">女</option>
									</select>
								</section>
							</section>
						</section>
						<!--<section class="layui-form-item">-->
							<!--<section class="label">-->
								<!--<section class="label-text">-->
									<!--<span class="required">*</span>-->
									<!--证件-->
								<!--</section>-->
								<!--<section class="layui-input-block">-->
									<!--<select name="sex">-->
										<!--<option value="">请选择</option>-->
										<!--<option :value="0">身份证</option>-->
										<!--<option :value="1">护照</option>-->
									<!--</select>-->
								<!--</section>-->
							<!--</section>-->
						<!--</section>-->
						<section class="layui-form-item">
							<section class="label">
								<section class="label-text">
									<span class="required">*</span>
									证件号
								</section>
								<section class="input-wrapper layui-input-block">
									<input autocomplete="off" readonly name="idcard" lay-verify="identity" type="text" placeholder="证件号">
								</section>
							</section>
						</section>

						<!--是参赛选手的身份时显示-->
						<template v-if="isStudent">
							<section class="layui-form-item">
								<section class="label">
									<section class="label-text">
										<span class="required">*</span>
										所在学校
									</section>
									<section class="input-wrapper layui-input-block">
										<input autocomplete="off" name="schoolName" type="text" placeholder="请输入所在学校">
									</section>
								</section>
							</section>
							<section class="layui-form-item">
								<section class="label">
									<section class="label-text">
										<span class="required">*</span>
										年级
									</section>
									<section class="layui-input-block">
										<select name="gradeName" lay-verify="required">
											<option value="一年级">一年级</option>
											<option value="二年级">二年级</option>
											<option value="三年级">三年级</option>
											<option value="四年级">四年级</option>
											<option value="五年级">五年级</option>
											<option value="六年级">六年级</option>
											<option value="初一">初一</option>
											<option value="初二">初二</option>
											<option value="初三">初三</option>
											<option value="高一">高一</option>
											<option value="高二">高二</option>
											<option value="高三">高三</option>
										</select>
									</section>
								</section>
							</section>
						</template>
						<!--是老师裁判的身份时显示-->
						<template v-else>
							<section class="layui-form-item">
								<section class="label">
									<section class="label-text">
										<span class="required">*</span>
										工作单位
									</section>
									<section class="input-wrapper layui-input-block">
										<input autocomplete="off" name="workUnit" lay-reqtext="请填写工作单位" lay-verify="required" type="text" placeholder="工作单位">
									</section>
								</section>
							</section>
							<section class="layui-form-item">
								<section class="label">
									<section class="label-text">
										<span class="required">*</span>
										职务
									</section>
									<section class="layui-input-block">
										<input autocomplete="off" name="job" lay-reqtext="请填写职务" lay-verify="required" type="text" placeholder="请填写职务">
									</section>
								</section>
							</section>
						</template>
						<section class="layui-form-item">
							<section class="label">
								<section class="label-text">
									<span class="required">*</span>
									邮箱
								</section>
								<section class="layui-input-block">
									<input autocomplete="off" name="email" lay-reqtext="请填写邮箱" lay-verify="required" type="text" placeholder="请填写邮箱">
								</section>
							</section>
						</section>
						<section class="layui-form-item">
							<section class="label">
								<section class="label-text">
									<span class="required">*</span>
									通讯地址
								</section>
								<section class="input-wrapper address">
									<div class="layui-inline">
										<select name="province" id="province" lay-verify="required" lay-reqtext="请选择省份" lay-search lay-filter="province">
											<option value="">省份</option>
										</select>
									</div>
									<div class="layui-inline">
										<select name="city" id="city" lay-verify="required" lay-reqtext="请选择地级市" lay-search lay-filter="city">
											<option value="">地级市</option>
										</select>
									</div>
									<div class="layui-inline">
										<select name="district" id="district" lay-verify="required" lay-reqtext="请选择县/区" lay-search lay-filter="district">
											<option value="">县/区</option>
										</select>
									</div>
								</section>
							</section>
						</section>
						<section class="layui-form-item">
							<textarea name="address" class="layui-textarea" id="" cols="30" rows="10"></textarea>
						</section>
						<!--是参赛选手的身份时显示-->
						<template v-if="isStudent">
							<section class="layui-form-item">
								<section class="label">
									<section class="label-text">
										<span class="required">*</span>
										监护人姓名
									</section>
									<section class="input-wrapper layui-input-block">
										<input autocomplete="off"  name="guardianName" type="text" placeholder="请输入监护人姓名">
									</section>
								</section>
							</section>
							<section class="layui-form-item">
								<section class="label">
									<section class="label-text">
										<span class="required">*</span>
										监护人手机号
									</section>
									<section class="input-wrapper layui-input-block">
										<input autocomplete="off" name="guardianPhone" type="text" placeholder="请输入监护人手机号">
									</section>
								</section>
							</section>
						</template>
						<section class="layui-form-item">
							<button type="submit" lay-submit="" lay-filter="submit">完成</button>
						</section>
					</form>
				</section>
			</section>
		</section>
	</section>
	<common-footer></common-footer>
</section>
<script src="./js/jquery.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./js/vue.min.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/ext/reg.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script src="./components/areaList.js"></script>
<script>
	$(function () {
		var vm = new Vue({
			el: '.wrapper',
			data: {
				isStudent: false,//是否是参赛选手
				form: null,
				userInfo: getUserInfo()
			},
			mounted: function () {
				var vm = this
				this.isStudent = this.userInfo.roleId === 2
				backToLogin()
				layui.use(['form', 'layer'], function () {
					vm.form = layui.form
					var form = vm.form
					var address = vm.userInfo.address.split('/')
					form.on('submit(submit)', function (data) {
						var field = data.field
						var address = field.province + '/' + field.city + '/' + field.district + '/' + field.address
						field.address = address
						updateUserInfo({
							schoolName: field.schoolName,
							grade: field.gradeName,
							address: address
						}, function () {
							tool.setObject('userInfo', $.extend(vm.userInfo, data.field))
							layui.layer.msg('修改成功', {icon: 1})
						})
					})
					vm.userInfo.province = address[0]
					vm.userInfo.city = address[1]
					vm.userInfo.district = address[2]
					form.val('editForm', $.extend(vm.userInfo, {address: address[3]}))
					var province = $('#province'),
						city = $('#city'),
						district = $('#district')
					//初始将省份数据赋予
					for (var i = 0; i < provinceList.length; i++) {
						addEle(province, provinceList[i].name)
					}
					province.val(vm.userInfo.province)
					//赋予完成 重新渲染select
					form.render('select')
					//向select中 追加内容
					function addEle(ele, value) {
						var optionStr = ''
						optionStr = '<option value=' + value + ' >' + value + '</option>'
						ele.append(optionStr)
					}

					//移除select中所有项 赋予初始值
					function removeEle(ele) {
						ele.find('option').remove()
						var optionStar = '<option value=' + '' + '>' + '请选择' + '</option>'
						ele.append(optionStar)
					}
					renderCity({
						elem: province,
						value: address[0]
					})
					city.val(address[1])
					city.parent().find('input').val(address[1])
					renderDistrict({
						elem: city,
						value: address[1]
					})
					district.val(address[2])
					district.parent().find('input').val(address[2])
					var provinceText,
						cityText,
						cityItem
					function renderCity(data) {
						$(data.elem).parent().attr('title', data.value)
						provinceText = data.value
						$.each(provinceList, function (i, item) {
							if (provinceText === item.name) {
								cityItem = i
								return cityItem
							}
						})
						removeEle(city)
						removeEle(district)
						provinceList[cityItem] && $.each(provinceList[cityItem].cityList, function (i, item) {
							addEle(city, item.name)
						})
						//重新渲染select
						form.render('select')
					}
					function renderDistrict (data) {
						cityText = data.value
						$(data.elem).parent().attr('title', data.value)
						removeEle(district)
						$.each(provinceList, function (i, item) {
							if (provinceText === item.name) {
								cityItem = i
								return cityItem
							}
						})
						provinceList[cityItem] && $.each(provinceList[cityItem].cityList, function (i, item) {
							if (cityText === item.name) {
								for (var n = 0; n < item.areaList.length; n++) {
									addEle(district, item.areaList[n])
								}
							}
						})
						//重新渲染select
						form.render('select')
					}
					//选定省份后 将该省份的数据读取追加上
					form.on('select(province)', renderCity)
					////选定市或直辖县后 将对应的数据读取追加上
					form.on('select(city)', renderDistrict)
					form.on('select(district)', function (data) {
						$(data.elem).parent().attr('title', data.value)
					})
				})
			}
		})
	})
</script>
</body>
</html>
